import  React,{Component} from 'react'
import  Header from '../../component/Header'
import Star from '../../component/Star/Star'
import Button from '../../component/Button'
import './style.scss'
import axios from '../../util/axios'
import {api}  from '../../api'
export default   class EvaluateItemD extends Component{
    constructor(props){
        super(props)
        this.state={
            data:{},
            selectIndex:0,
            content:'',
            editActive:false,
            barList:[
                {name:"服务态度",init:5},
                {name:"驾驶技术",init:5},
                {name:"车辆整洁",init:5}
             ],
            choice:[
              {name:'非常满意',id:1,isChcek:true},
              {name:'满意',id:2,isChcek:false},
              {name:'一般',id:3,isChcek:false},
              {name:'不满意',id:4,isChcek:false}
            ]
        }
        this.post=this.post.bind(this)
        this._rightAction=this._rightAction.bind(this)
    }

    getEdit(item){
   let {evaluateType,statusNo,evaluateRemark}=item
    if(evaluateType>5){
       evaluateType=5
    }else if(evaluateType<=0){
        evaluateType=1
    }

   if(statusNo==0){
            let barList=this.state.barList;
            barList.map((item,index)=>{
               item.init=evaluateType
              
            })
         this.setState({
             
               selectIndex:evaluateType,
               typeId:evaluateType,
               content:evaluateRemark,
               barList
           })
        }
    }
    componentDidMount(){

  let statusNo=this.props.match.params.typeId;
   let item=this.props.location.state&&this.props.location.state!=''?this.props.location.state.item:'';
   let data=item;
    if(data&&data!=''&&data.id!=''){
          
             sessionStorage.EvaluateItem=JSON.stringify(data);
          }else{
          let itemStorage =sessionStorage.EvaluateItem
            if(itemStorage&&itemStorage!=''){
                data=JSON.parse(itemStorage);
             }
          }
       this.setState({
            data
         })
        if(statusNo==0){
            this.getEdit(data);
        }
    }
   getStatus(status){
        let str="未评价"
       switch(status){
          case 0:
          str="未评价";
          break;
          case 1:
          str="非常满意";
          break;
          case 2:
          str="满意";
          break;
          case 3:
          str="一般";
          break;
          case 4:
          str="不满意";
          break;
    
       }
       return str;
    }
    choiceAction(index){
       let choice=this.state.choice;
       choice.map((item,index)=>{
         item.isChcek=false;
       })
        if(choice&&choice.length>0){
            choice[index].isChcek=true
        }
        this.setState({
            choice ,
            selectIndex:index   
       })
    }
    renderType(){
      let domList=[];
       this.state.choice.map((item,index)=>{
           domList.push(<li 
            key={item.id+"choice_itme"}
            onClick={()=>this.choiceAction(index)}
            className={['choice-item'].join("   ")}>
              <p className={index==this.state.selectIndex?"active":''}>{item.name}</p>
            </li>);
       })
    
       return(
        <ul  className="choice-class">
              {domList}
        </ul>
       )
    }

    post() {
     let statusNo=this.props.match.params.typeId;
        
        let user=JSON.parse(sessionStorage.user)
        let formData = new FormData();
        formData.append("applyId", this.state.data.id);
        formData.append("userName", user.userName);
        formData.append("evaluateType",this.state.choice[this.state.selectIndex]);
        formData.append("evaluateRemark", this.state.content);
        console.log(formData);
   
        axios.post(statusNo==0?api.evaluateEdit:api.evaluatePost, formData)
         .then(response => {
          
           
                if (response.result = "ok") {
                 
                   
                    alert(statusNo==0?"修改成功":'评价成功');
                } else {
                    alert(statusNo==0?"修改失败":'评价失败');
                }
 
            }).catch(err=>{
           
          
             alert(statusNo==0?"修改失败,请稍后重试":'评价失败,请稍后重试');
            
 
            })
    }
    textareaChage(e){
      
       let  textarea=e.target.value;
      this.setState({content:textarea});
           
         
    }
    _rightAction(){
       this.setState({
            editActive:!this.state.editActive
       })
    }
    render(){
       let data=this.state.data
       let statusNo=this.props.match.params.typeId;

       return (
           <div className="evaluate-itemD">
                <Header 
                  title="评价"
                   isBack={true}
                   history={this.props.history}
                   rightAction={this._rightAction}
                  // rightButtonView={statusNo==0?<span style={{color:'#ffffff'}}>编辑</span>:null}
                   />
                 <div className="body">
                    <div className="bg">
                      <div className="top-item">
                                <img className="item-img" src={require('../CommonList/apply_new_car_img.png')}/>
                                <div className="item-info">
                                    <p className="nunber">{data.yongCheNo}</p>
                                    <div className="item-info-text">
                                        <p><span>总费用：{data.feiyong}</span></p>
                                        <p><span>公里数：{data.xingshiKm}</span></p>
                                    </div>
                                </div>
                        </div>
                        {this.renderType()}
                        <div className="start-group-list">
                                {this.state.barList.map((item,index)=><Star
                                key={index+"Star"}
                                label={item.name}
                                rank={item.init}
                                limit={5}
                                onClick={(index)=>console.log(index)}
                                />)}
                        </div>
                      </div>
                       <div className="evaluateItem-content">
                            <p className="evaluateItem-content-title">评价内容</p>
                            <div className="textarea-conatiner">
                                    <textarea 
                                    onChange={this.textareaChage}
                                    className="textarea"
                                    placeholder="给一路陪伴的驾驶员一些建议或者感谢吧"/>
                            </div>
                       </div>
                        <div className="evaluateItem-button">
                               <Button
                                title={statusNo==0?"修改":"提交"}
                                action={this.post}
                                style={{width:'80%'}}
                            />
                        </div>
                 </div>
                 
                 
                 
           </div>
       )
    }
}